<template>
	<view>
		<view>
			<textarea  maxlength="80" placeholder="请输入打乱公式..."  v-model="scramble"  confirm-type="done" @confirm="read()" class="inputStyle"/>
		</view>
		<view class="button">
			<button type="primary"  plain size="mini" @click="clear">清空</button>
			<button type="primary"  plain size="mini" @click="random">随机</button>
			<button type="primary"  plain size="mini" @click="read">读码</button>
		</view>
		
		
		<view style="display: flex;flex-direction: row; margin-top: 10rpx;">
			<view  style="margin-top: 5rpx; visibility: hidden;">
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
			</view>
		
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[0] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[1] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[2] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[3] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[4] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[5] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[6] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[7] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[8] }"></view>
				</view>
			</view>
		
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<view class="fontClass">当前借位顺序</view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="fontClass" >角块:</view>
					<view class="fontClass" v-for="(item,index) in cornerLend" :key="index">
						<view>{{"&nbsp;"+cornerS[item][0]}}</view>
					</view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="fontClass" >棱块:</view>
					<view class="fontClass" v-for="(item,index) in edgeLend" :key="index">
						<view>{{"&nbsp;"+edgeS[item][0]}}</view>
					</view>
				</view>
			</view>
		
		</view>
		
		<view style="display: flex;flex-direction: row;">
			<view  style="margin-top: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[36] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[37] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[38] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[39] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[40] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[41] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[42] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[43] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[44] }"></view>
				</view>
			</view>
		
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[18] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[19] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[20] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[21] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[22] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[23] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[24] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[25] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[26] }"></view>
				</view>
			</view>
		
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[9] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[10] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[11] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[12] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[13] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[14] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[15] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[16] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[17] }"></view>
				</view>
			</view>
			
			
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[45] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[46] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[47] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[48] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[49] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[50] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[51] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[52] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[53] }"></view>
				</view>
			</view>
		
		</view>
		
		<view style="display: flex;flex-direction: row;">
			<view  style="margin-top: 5rpx; visibility: hidden;">
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView"></view>
					<view class="colorView"></view>
					<view class="colorView"></view>
				</view>
			</view>
		
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[27] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[28] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[29] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[30] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[31] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[32] }"></view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="colorView" :style="{ backgroundColor: colors[33] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[34] }"></view>
					<view class="colorView" :style="{ backgroundColor: colors[35] }"></view>
				</view>
			</view>
		
			<view style="margin-top: 5rpx; margin-left: 5rpx;">
				<view style="display: flex;flex-direction: row;">
					<view class="fontClass">复原坐标:</view>
					<view class="fontClass">{{coordinateRange[coordinateIndex].text}}</view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="fontClass" >角块缓冲:</view>
					<view class="fontClass" >{{bufferCorner[bufferIndex_C]}}</view>
				</view>
				<view style="display: flex;flex-direction: row;">
					<view class="fontClass" >棱块缓冲:</view>
					<view class="fontClass" >{{bufferEdge[bufferIndex_E]}}</view>
				</view>
			</view>
		</view>
		
		<view style="margin-top: 5rpx; margin-left: 5rpx;">
			<view style="display: flex;flex-direction: row;">
				<view class="fontLend">蓝色借位,</view>
				<view class="fontH">绿色还位</view>
				<view class="fontClass" v-if="cornerIsKeep&&edgeIsKeep">(保持色向借位)</view>
				<view class="iskeep" v-else>
					<view class="fontClass">{{cornerIsKeep?"角保持色向借位,":"角未保持色向借位,"}}</view>
					<view class="fontClass">{{edgeIsKeep?"棱保持色向借位":"棱未保持色向借位"}}</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<view class="fontClass">坐标调整:</view>
				<view class="fontClass">{{coordinate}}</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<view class="fontClass" >角块编码:</view>
				<view class="codeViewClass" v-for="(corner,index) in cornerCodeArray" :key="index">
					<view class="fontLend" v-if="corner.isLend">{{index%2==0?corner.code:corner.code+"&nbsp;"}}</view>
					<view class="fontH" v-else-if="corner.isH">{{index%2==0?corner.code:corner.code+"&nbsp; "}}</view>
					<view class="fontO" v-else>{{index%2==0?corner.code:corner.code+"&nbsp;"}}</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<view class="fontClass" >角块翻色:</view>
				<view class="codeViewClass" v-for="(code,index) in cornerCodeFlipArray" :key="index">
					<view class="fontO">{{code+"&nbsp;"}}</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<view class="fontClass" >棱块编码:</view>
				<view class="codeViewClass" v-for="(edge,index) in edgeCodeArray" :key="index">
					<view class="fontLend" v-if="edge.isLend">{{index%2==0?edge.code:edge.code+"&nbsp;"}}</view>
					<view class="fontH" v-else-if="edge.isH">{{index%2==0?edge.code:edge.code+"&nbsp; "}}</view>
					<view class="fontO" v-else>{{index%2==0?edge.code:edge.code+"&nbsp;"}}</view>
				</view>
			</view>
			<view style="display: flex;flex-direction: row;">
				<view class="fontClass" >棱块翻色:</view>
				<view class="codeViewClass" v-for="(code,index) in edgeCodeFlipArray" :key="index">
					<view class="fontO">{{code+"&nbsp;"}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import constant from '../../utils/constant';
	import min2phase from '../../utils/min2phase';
	import cube from '../../utils/cube';
	export default {
		data() {
			return {
				scramble:"",
				cubeState:"UUUUUUUUURRRRRRRRRFFFFFFFFFDDDDDDDDDLLLLLLLLLBBBBBBBBB",
				colors:[constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),constant.getYellow(),
							constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),constant.getGreen(),
							constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),constant.getRed(),
							constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),constant.getWhite(),
							constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),constant.getBlue(),
							constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),constant.getOrange(),
							],
				coordinate:"",//调整坐标
				cornerCodeArray:[],
				cornerCodeFlipArray:[],
				edgeCodeArray:[],
				edgeCodeFlipArray:[],
				bufferIndex_C:1,
				bufferIndex_E:2,
				cornerIsKeep:true,
				edgeIsKeep:true,
				bufferCorner:["UBR","UFR","UFL","UBL","DBR","DFR","DFL","DBL"],
				bufferEdge:["UB","UR","UF","UL","UU",
				"BR","RR","FR","FF","FL","LL","BL","BB",
				"DB","DR","DF","DL","DD"],
				cornerLend:[],
				edgeLend:[],
				coordinateRange: [],
				coordinateIndex:0,//复原坐标
				cornerS:[],
				edgeS:[]
			};
		},
		onLoad() {
			this.update();
			
			uni.$on('update',() =>{
				this.update();
				this.read();
			});
			
		},
		methods:{
			update(){
				this.bufferIndex_C = constant.getBufferIndex_C();
				this.bufferIndex_E = constant.getBufferIndex_E();
				this.cornerIsKeep = constant.getCornerIsKeep();
				this.edgeIsKeep = constant.getEdgeIsKeep();
				this.cornerLend = constant.getCornerLend();
				this.edgeLend = constant.getEdgeLend();
				this.coordinateIndex = constant.getCoordinate();
				this.cornerS = constant.getCornerS();
				this.edgeS = constant.getEdgeS();
				this.coordinateRange = constant.getCoordinateRange();
			},
			clear(){
				this.scramble = "";
				this.cubeState="UUUUUUUUURRRRRRRRRFFFFFFFFFDDDDDDDDDLLLLLLLLLBBBBBBBBB";
				this.colors = this.getColors();
				this.coordinate="";
				this.cornerCodeArray=[];
				this.cornerCodeFlipArray=[];
				this.edgeCodeArray=[];
				this.edgeCodeFlipArray=[];
			},
			random(){
				var s = min2phase.get3BlDScramble();
				this.scramble = s;
				console.log(s);
				var cs = Array.from(this.cornerS);
				var es = Array.from(this.edgeS);
				this.cubeState = cube.getCubeState(this.scramble,cs,es);
				this.colors = this.getColors();
				
				var lc = Array.from(this.cornerLend);
				var le = Array.from(this.edgeLend);
				var res = cube.readCode(this.scramble,cs,es,this.bufferIndex_C,this.bufferIndex_E,this.cornerIsKeep,this.edgeIsKeep,lc,le);
				this.handleCodeArrays(res);
			},
			read(){
				if(this.scramble==""){
					this.clear();
					return;
				}
				var cs = Array.from(this.cornerS);
				var es = Array.from(this.edgeS);
				this.cubeState = cube.getCubeState(this.scramble,cs,es);
				this.colors = this.getColors();
				var lc = Array.from(this.cornerLend);
				var le = Array.from(this.edgeLend);
				var res = cube.readCode(this.scramble,cs,es,this.bufferIndex_C,this.bufferIndex_E,this.cornerIsKeep,this.edgeIsKeep,lc,le);
				this.handleCodeArrays(res);
			},
			getColors(){
				var result = [];
				for(var c=0;c<this.cubeState.length;c++){
					result.push(this.getColor(this.cubeState[c]));
				}
				return result;
			},
			getColor(option){
				if(option=="U")return this.getColorWithCoordinate()[this.coordinateIndex][0];
				if(option=="B")return this.getColorWithCoordinate()[this.coordinateIndex][1];
				if(option=="R")return this.getColorWithCoordinate()[this.coordinateIndex][2];
				if(option=="F")return this.getColorWithCoordinate()[this.coordinateIndex][3];
				if(option=="D")return this.getColorWithCoordinate()[this.coordinateIndex][4];
				if(option=="L")return this.getColorWithCoordinate()[this.coordinateIndex][5];
			},
			handleCodeArrays(res){
				this.coordinate = res[0];
				this.cornerCodeArray=res[1];
				this.cornerCodeFlipArray=res[2];
				this.edgeCodeArray=res[3];
				this.edgeCodeFlipArray=res[4];
			},
			getColorWithCoordinate(){
				var colors = [
					//坐标颜色按照   U       B      R     F      D        L 的顺序存储
					[constant.getYellow(),constant.getOrange(),constant.getGreen(),constant.getRed(),constant.getWhite(),constant.getBlue()],//黄顶红前
					[constant.getYellow(),constant.getGreen(),constant.getRed(),constant.getBlue(),constant.getWhite(),constant.getOrange()],//黄顶蓝前
					[constant.getYellow(),constant.getRed(),constant.getBlue(),constant.getOrange(),constant.getWhite(),constant.getGreen()],//黄顶橙前
					[constant.getYellow(),constant.getBlue(),constant.getOrange(),constant.getGreen(),constant.getWhite(),constant.getRed()],//黄顶绿前
					
					[constant.getWhite(),constant.getBlue(),constant.getRed(),constant.getGreen(),constant.getYellow(),constant.getOrange()],//白顶绿前
					[constant.getWhite(),constant.getRed(),constant.getGreen(),constant.getOrange(),constant.getYellow(),constant.getBlue()],//白顶橙前
					[constant.getWhite(),constant.getGreen(),constant.getOrange(),constant.getBlue(),constant.getYellow(),constant.getRed()],//白顶蓝前
					[constant.getWhite(),constant.getOrange(),constant.getBlue(),constant.getRed(),constant.getYellow(),constant.getGreen()],//白顶红前
					
					[constant.getGreen(),constant.getOrange(),constant.getWhite(),constant.getRed(),constant.getBlue(),constant.getYellow()],//绿顶红前
					[constant.getGreen(),constant.getWhite(),constant.getRed(),constant.getYellow(),constant.getBlue(),constant.getOrange()],//绿顶黄前
					[constant.getGreen(),constant.getRed(),constant.getYellow(),constant.getOrange(),constant.getBlue(),constant.getWhite()],//绿顶橙前
					[constant.getGreen(),constant.getYellow(),constant.getOrange(),constant.getWhite(),constant.getBlue(),constant.getRed()],//绿顶白前
					
					[constant.getBlue(),constant.getOrange(),constant.getYellow(),constant.getRed(),constant.getGreen(),constant.getWhite()],//蓝顶红前
					[constant.getBlue(),constant.getYellow(),constant.getRed(),constant.getWhite(),constant.getGreen(),constant.getOrange()],//蓝顶白前
					[constant.getBlue(),constant.getRed(),constant.getWhite(),constant.getOrange(),constant.getGreen(),constant.getYellow()],//蓝顶橙前
					[constant.getBlue(),constant.getWhite(),constant.getOrange(),constant.getYellow(),constant.getGreen(),constant.getRed()],//蓝顶黄前
					
					[constant.getRed(),constant.getBlue(),constant.getYellow(),constant.getGreen(),constant.getOrange(),constant.getWhite()],//红顶绿前
					[constant.getRed(),constant.getYellow(),constant.getGreen(),constant.getWhite(),constant.getOrange(),constant.getBlue()],//红顶白前
					[constant.getRed(),constant.getGreen(),constant.getWhite(),constant.getBlue(),constant.getOrange(),constant.getYellow()],//红顶蓝前
					[constant.getRed(),constant.getWhite(),constant.getBlue(),constant.getYellow(),constant.getOrange(),constant.getGreen()],//红顶黄前
					
					[constant.getOrange(),constant.getWhite(),constant.getGreen(),constant.getYellow(),constant.getRed(),constant.getBlue()],//橙顶黄前
					[constant.getOrange(),constant.getGreen(),constant.getYellow(),constant.getBlue(),constant.getRed(),constant.getWhite()],//橙顶蓝前
					[constant.getOrange(),constant.getYellow(),constant.getBlue(),constant.getWhite(),constant.getRed(),constant.getGreen()],//橙顶白前
					[constant.getOrange(),constant.getBlue(),constant.getWhite(),constant.getGreen(),constant.getRed(),constant.getYellow()]//橙顶绿前
					
					];
				
				return colors;
			}
		}
	}
</script>

<style lang="scss">
.inputStyle{
	display: flex;
	padding: 10rpx;
	margin: 10rpx;
	width: 710rpx;
	height: 90rpx;
	border-style: solid;
	border-width: 2rpx;
	border-color: skyblue;
	align-items: left;
	flex-direction: row;
	background-color: gainsboro;
	
}
.button{
	display: flex;
	padding: 5rpx;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	button{
		width: 230rpx;
	}
}
.cube{
	display: flex;
	flex-direction: row;
	
}


.cube-top-down{
	margin-left: 150rpx; 
	margin-top: 10rpx;
}

.colorView{
	width: 40rpx;
	height: 40rpx;  
	margin: 1rpx;
	border: solid;
	border-width: 2rpx;
}
.fontClass{
	height: 40rpx;
	font-size: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.iskeep{
	height: 40rpx;
	font-size: 20rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.codeViewClass{
	height: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
}
.fontLend{
	height: 40rpx;
	font-size: 20rpx;
	display: flex;
	color: #0000FF;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.fontH{
	height: 40rpx;
	font-size: 20rpx;
	display: flex;
	color: #00CC00;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.fontO{
	height: 40rpx;
	font-size: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}


</style>
